<template>
  <view class="login-page">
    <!-- 登录表单 -->
    <view class="login-container">
      <text class="page-title">手机号码登录</text>
      <view class="login-form">
        <!-- 手机号码输入 -->
        <view class="input-group">
          <view class="input-field">
            <input 
              type="number" 
              v-model="mobileNumber" 
              placeholder="请输入手机号码"
              maxlength="11"
              @input="formatMobileNumber"
            />
            <view class="clear-btn" v-if="mobileNumber" @click="clearMobile">
              <text class="iconfont-v2 icon-close"></text>
            </view>
          </view>
        </view>

        <!-- 验证码输入 -->
        <view class="input-group">
          <view class="input-field verification-field">
            <input 
              type="number" 
              v-model="verificationCode" 
              placeholder="请输入手机验证码"
              maxlength="6"
            />
            <view class="verification-btn" @click="sendVerificationCode" :class="{ disabled: isCountdown }">
              <text>{{ countdownText }}</text>
            </view>
          </view>
        </view>

        <!-- 登录按钮 -->
        <button class="login-btn" @click="handleLogin" :disabled="!canLogin">
          <text>登录</text>
        </button>

        <!-- 新用户注册 -->
        <view class="register-link">
          <text @click="goToRegister">新用户注册</text>
            <text class="iconfont-v2 icon-youjiantou"></text>
        </view>

        <!-- 其他登录方式 -->
        <view class="other-login">
          <text class="other-login-title">其他登录方式</text>
          <view class="login-methods">
            <view class="login-method" @click="loginWithWeChat">
              <view class="method-icon wechat-icon">
                <text class="iconfont-v2 icon-weixin"></text>
              </view>
            </view>
            <view class="login-method" @click="loginWithQQ">
              <view class="method-icon qq-icon">
                <text class="iconfont-v2 icon-qq"></text>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { wechatBindingPhone } from "@/api/public";
export default {
  data() {
    return {
      mobileNumber: "15800000000",
      verificationCode: "3456",
      isCountdown: false,
      countdown: 0,
      countdownTimer: null
    }
  },
  computed: {
    canLogin() {
      return this.mobileNumber.length === 11 && this.verificationCode.length === 6;
    },
    countdownText() {
      if (this.isCountdown) {
        return "重新获取";
      }
      return "获取验证码";
    }
  },
  methods: {
    goBack() {
      uni.navigateBack();
    },
    formatMobileNumber(event) {
      // 只允许输入数字
      let value = event.detail.value.replace(/\D/g, '');
      if (value.length > 11) {
        value = value.slice(0, 11);
      }
      this.mobileNumber = value;
    },
    clearMobile() {
      this.mobileNumber = "";
    },
    sendVerificationCode() {
      if (this.isCountdown) return;
      
      if (!this.mobileNumber) {
        uni.showToast({
          title: '请输入手机号码',
          icon: 'none'
        });
        return;
      }
      
      if (this.mobileNumber.length !== 11) {
        uni.showToast({
          title: '请输入正确的手机号码',
          icon: 'none'
        });
        return;
      }
      
      // 模拟发送验证码
      console.log('发送验证码到:', this.mobileNumber);
      uni.showToast({
        title: `验证码已发送到 ${this.mobileNumber}`,
        icon: 'success'
      });
      
      // 开始倒计时
      this.startCountdown();
    },
    startCountdown() {
      this.isCountdown = true;
      this.countdown = 60;
      
      this.countdownTimer = setInterval(() => {
        this.countdown--;
        if (this.countdown <= 0) {
          clearInterval(this.countdownTimer);
          this.isCountdown = false;
          this.countdown = 0;
        }
      }, 1000);
    },
    handleLogin() {
      if (!this.canLogin) {
        uni.showToast({
          title: '请完善登录信息',
          icon: 'none'
        });
        return;
      }
      
      console.log('登录信息:', {
        mobile: this.mobileNumber,
        code: this.verificationCode
      });
      
      // 模拟登录
      uni.showToast({
        title: '登录成功！',
        icon: 'success'
      });
      
      // 跳转到首页
      uni.switchTab({
        url: '/pages/index/index'
      });
    },
    goToRegister() {
      uni.navigateTo({
        url: '/pages/fast/register'
      });
    },
    loginWithWeChat() {
      console.log('微信登录');
      // 实现微信登录逻辑
    },
    loginWithQQ() {
      console.log('QQ登录');
      // 实现QQ登录逻辑
    }
  },
  onLoad() {
    // 页面初始化
  },
  onUnload() {
    if (this.countdownTimer) {
      clearInterval(this.countdownTimer);
    }
  }
}
</script>

<style lang="scss" scoped>
.login-page {
  min-height: 100vh;
  background: white;
  padding: 120rpx 40rpx 40rpx;
}

.login-container {
  max-width: 800rpx;
  margin: 0 auto;
  
  .page-title {
    text-align: center;
    font-size: 48rpx;
    font-weight: 600;
    color: #333;
    margin-bottom: 80rpx;
  }
  
  .login-form {
    background: transparent;
    border-radius: 0;
    padding: 0 0 400rpx 0;
    box-shadow: none;
    margin-top: 100rpx;
    
    .input-group {
      margin-bottom: 40rpx;
      
      .input-field {
        position: relative;
        height: 100rpx;
        border-bottom: 2rpx solid #e0e0e0;
        border-radius: 0;
        display: flex;
        align-items: center;
        padding: 0 0 20rpx 0;
        background: transparent;
        
        input {
          flex: 1;
          border: none;
          outline: none;
          background: transparent;
          font-size: 32rpx;
          color: #333;
          
          &::placeholder {
            color: #999;
          }
        }
        
        .clear-btn {
          width: 40rpx;
          height: 40rpx;
          display: flex;
          align-items: center;
          justify-content: center;
          cursor: pointer;
          border-radius: 50%;
          background: #ccc;
          
          .iconfont-v2 {
            font-size: 24rpx;
            color: white;
          }
          
          &:hover {
            background: #999;
          }
        }
        
        &.verification-field {
          padding-right: 0;
          
          .verification-btn {
            // min-width: 200rpx;
            height: 72rpx;
            display: flex;
            align-items: center;
            justify-content: center;
            background: transparent;
            color: #ff6b6b;
            border: none;
            border-radius: 12rpx;
            font-size: 28rpx;
            cursor: pointer;
            margin-right: 20rpx;
            transition: all 0.3s ease;
            
            &:hover:not(.disabled) {
              color: #ff5252;
            }
            
            &.disabled {
              color: #999;
              cursor: not-allowed;
              opacity: 0.6;
            }
          }
        }
      }
    }
    
    .login-btn {
      width: 100%;
      height: 100rpx;
      background: #E5645E;
      border: none;
      border-radius: 50rpx;
      font-size: 36rpx;
      color: white;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.3s ease;
      margin-bottom: 40rpx;
      display: flex;
      justify-content: center;
      align-items: center;
      box-shadow: 0 4rpx 16rpx rgba(229, 100, 94, 0.3);
      
      &:hover:not(:disabled) {
        background: #d55a54;
        transform: translateY(-2rpx);
        box-shadow: 0 8rpx 24rpx rgba(229, 100, 94, 0.4);
      }
      
      &:active:not(:disabled) {
        transform: translateY(0);
      }
      
      &:disabled {
        background: #ccc;
        cursor: not-allowed;
        transform: none;
        box-shadow: none;
      }
    }
    
    .register-link {
      display: flex;
      justify-content: center;
      align-items: center;
      text-align: center;
      margin-bottom: 60rpx;
      
      
      text {
        color: #666;
        font-size: 28rpx;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8rpx;
        
        .iconfont-v2 {
          font-size: 24rpx;
        }
        
        &:hover {
          color: #ED6567;
        }
      }
    }
    
    .other-login {
      position: fixed;
      bottom: 200rpx;
      left: 0;
      right: 0;
      padding: 0 40rpx;
      
      .other-login-title {
        text-align: center;
        color: #999;
        font-size: 28rpx;
        margin-bottom: 40rpx;
        display: flex;
        justify-content: center;
        align-items: center;
      }
      
      .login-methods {
        display: flex;
        justify-content: center;
        gap: 60rpx;
        
        .login-method {
          cursor: pointer;
          
          .method-icon {
            width: 100rpx;
            height: 100rpx;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: transform 0.3s ease;
            
            .iconfont-v2 {
              font-size: 48rpx;
              color: white;
            }
            
            &.wechat-icon {
              background: #07c160;
            }
            
            &.qq-icon {
              background: #23A0F0;
            }
          }
          
          &:hover .method-icon {
            transform: scale(1.1);
          }
        }
      }
    }
  }
}
</style>
